<template>
  <view
    class="message-item"
    :class="{ 'u-m-t-20': compareTime(currItem, lastItem) }"
  >
    <view
      v-if="!lastItem || !compareTime(currItem, lastItem)"
      class="u-text-center u-m-t-20 u-m-b-20"
    >
      <view class="time">{{ splitTime(currItem) }}</view>
    </view>
    <u-card
      :show-head="false"
      :show-foot="false"
      border-radius="32"
      margin="0"
      @click="messageClick(currItem)"
    >
      <view slot="body">
        <view style="display: flex; align-item: center; margin-bottom: 20rpx">
          <view
            class="title-icon"
            :class="{ 'title-icon-readed': currItem.readFlag }"
            ><u-icon
              name="lingdang"
              custom-prefix="custom-icon"
              color="#fff"
              :size="28"
            ></u-icon>
            <u-badge
              v-if="!currItem.readFlag"
              type="error"
              count="7"
              :is-dot="true"
              :offset="[0, 0]"
            ></u-badge>
          </view>
          <view class="title" style="line-height: 50rpx"
            >{{ businessType[currItem.businessType] }}消息提醒</view
          >
        </view>
        <view>{{ currItem.msgContent }}</view>
      </view>
    </u-card>
  </view>
</template>
<script lang="ts" setup>
import { dataFormat } from '@/utils/tools';
import { getProjectDetails } from '@/api/modules/project';
import { msgUpdateRead } from '@/api/modules/message';

const emits = defineEmits(['reload']);

const props = defineProps<{
  currItem: any;
  lastItem: any;
  messageTypeList: any;
}>();

const { lastItem, currItem, messageTypeList } = toRefs(props);

const businessType = computed(() => {
  const typeMap: any = {};
  (messageTypeList.value ?? []).forEach((item: any) => {
    typeMap[item.value] = item.name;
  });
  return typeMap;
});

const compareTime = (currItem: any, lastItem: any) => {
  if (!lastItem) return false;
  const currTime = splitTime(currItem);
  const lastTime = splitTime(lastItem);
  return currTime === lastTime;
};
const splitTime = (item: any) => {
  const regxp =
    /(\d{3}[1-9]|\d{2}[1-9]\d{1}|\d{1}[1-9]\d{2}|[1-9]\d{3})-(((0[13578]|1[02])-(0[1-9]|[12]\d|3[01]))|((0[469]|11)-(0[1-9]|[12]\d|30))|(02-(0[1-9]|[1]\d|2[0-8])))([ ])([0-1]?\d|2[0-3]):([0-5]\d)/g;
  const dateTimeStr = regxp.exec(item.createTime)?.[0];
  const dateStr = dateTimeStr?.split(' ') ?? [];
  const todayStr = dataFormat('yyyy-MM-dd', new Date());
  return dateStr[0] === todayStr ? '今天 ' + dateStr[1] : dateTimeStr;
};

const messageClick = (item: any) => {
  const fnList = [
    msgUpdateRead({
      msgReadType: item ? 2 : 1,
      msgReceiveId: item?.msgReceiveId,
    }),
  ];
  if (item.businessId) {
    fnList.push(
      getProjectDetails({
        projectId: item.businessId || item.projectId,
      })
    );
  }
  Promise.all(fnList).then((res: any) => {
    if (item.businessId) {
      (uni as any).$Router.push({
        name: 'projectHome',
        params: { params: encodeURIComponent(JSON.stringify(res[1])) },
      });
    } else {
      emits('reload');
    }
  });
};
</script>
<style lang="scss">
.message-item {
  overflow: hidden;
  padding: 0 32rpx;

  .time {
    text-align: center;
    color: #fff;
    background-color: #d7d7d7;
    line-height: 60rpx;
    display: inline-block;
    border-radius: 30rpx;
    padding: 0 30rpx;
  }
  .title-icon {
    width: 50rpx;
    height: 50rpx;
    background: #0177fd;
    border-radius: 25rpx;
    margin-right: 20rpx;
    text-align: center;
    line-height: 50rpx;
    position: relative;
  }
  .title-icon-readed {
    background: #ccc !important;
  }
  .title {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
  }
}
</style>
